<template lang="pug">
  div(style="width:100%;height:calc(100% - 10px)")
   myTable( ref="myTable" :mySeach="mySeach" :tableHeader="tableHeader" :myTableButtons="myTableButtons"  :myButtons="myButtons"  seachMenth="GET" seachUrl="/web/children/selChildrenLeaveRequestPage")
   el-drawer(:title="isAdd?'新增请假登记':'编辑请假登记'" :visible.sync="dialogVisible" append-to-body :wrapperClosable="false" )
     el-form.myAddFrom(:model="formInline" :rules="myRules" ref="addOrEdit" label-position="top")
       el-form-item(:label="item.label" v-for="(item,index) in myAdd" :key="index" :prop="item.prop")
        el-col(:span="24")
          el-date-picker(v-model="formInline[item.prop]" type="datetime" v-if="item.type==='date'"
            :placeholder="item.placeholder" :picker-options ="item.prop==='startTime'?pickerOptionsState:pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" style="width:100%")
          el-select( v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='select'" filterable style="width:100%"
            @change="(e)=>{item.change?item.change(e):''}")
           el-option(v-for="(itemData,itemIndex) in item.data" :key="itemIndex" :label="itemData.name" :value="itemData.id" )
          el-input(v-model="formInline[item.prop]" clearable :placeholder="item.placeholder"  v-if="item.type==='input'" style="width:100%")
          el-input(v-model="formInline[item.prop]" clearable :placeholder="item.placeholder" type="textarea" v-if="item.type==='textarea'" style="width:100%"  :rows="4")
       el-form-item.bottom
         el-col(:span="21")
          el-button(type="primary" @click="onSubmit") {{isAdd?'新增':'修改'}}
</template>
<script>
import myTable from '../components/myTable.vue'
import { getClassesByArea } from '@/api/common'
import { mapGetters } from 'vuex'
import { getInfo } from '@/views/basicData/class/api'
import {
  delChildrenLeaveRequest,
  editChildrenLeaveRequest,
  saveChildrenLeaveRequest, selChildrenLeaveRequestExport
} from '@/api/educationalAdminstration'

export default {
  name: 'LeaveManagement',
  components: {
    myTable
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  data () {
    return {
      isAdd: true,
      dialogVisible: false,
      mySeach: [
        {
          label: '日期',
          type: 'date',
          placeholder: '选择日期',
          prop: 'startTime',
          valueFormat: 'yyyy-MM-dd HH:mm'
        },
        {
          label: '班级',
          type: 'select',
          prop: 'classesId',
          data: []
        },
        {
          label: '姓名',
          type: 'input',
          placeholder: '请输入姓名',
          prop: 'name'
        }
      ],
      tableHeader: [
        {
          label: '班级',
          prop: 'classesName',
          type: 'data'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '开始日期',
          prop: 'startTime'
        },
        {
          label: '结束日期',
          prop: 'endTime'
        },
        {
          label: '请假原因',
          prop: 'leaveContent'
        },
        {
          label: '状态',
          prop: 'state',
          type: 'select',
          data: {
            0: '未确认',
            1: '已确认',
            2: '已取消'
          }
        }
      ],
      formInline: {},
      myRules: {
        classesId: [
          { required: true, message: '请选择所在班级', trigger: 'change' }
        ],
        chldrenId: [
          { required: true, message: '请选择姓名', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择请假开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择请假结束时间', trigger: 'change' }
        ],
        leaveContent: [
          { required: true, message: '请输入请假事由', trigger: 'blur' }
        ]
      },
      myAdd: [
        {
          label: '所在班级',
          type: 'select',
          prop: 'classesId',
          data: []
        },
        {
          label: '姓名',
          type: 'select',
          prop: 'chldrenId',
          data: []
        },
        {
          label: '请假开始时间',
          type: 'date',
          placeholder: '选择日期',
          prop: 'startTime'
        },
        {
          label: '请假结束时间',
          type: 'date',
          placeholder: '选择日期',
          prop: 'endTime'
        },
        {
          label: '请假事由',
          type: 'textarea',
          placeholder: '选输入请假事由',
          prop: 'leaveContent'
        }
      ],
      pickerOptionsState: {
        disabledDate (time) {
          return false
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      pickerOptionsEnd: {
        disabledDate (time) {
          return time.getTime() > (new Date(this.formInline.startTime)).getTime()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      myTableButtons: [
        {
          label: '编辑',
          click: (data) => {
            console.log('data', data)
          }
        },
        {
          label: '删除',
          click: (data) => {
            console.log('data', data)
          }
        }
      ],
      myButtons: [
        {
          label: '新增请假登记',
          type: 'warning',
          click: (data) => {
            console.log('data', data)
          }
        },
        {
          label: '导出',
          type: 'warning',
          plain: true,
          click: (data) => {
            console.log('data', data)
          }
        }
      ]
    }
  },
  async mounted () {
    console.log('数据', this.formInline)

    this.pickerOptionsState.disabledDate = (time) => {
      return time.getTime() > (new Date(this.formInline.endTime)).getTime()
    }
    this.pickerOptionsEnd.disabledDate = (time) => {
      return time.getTime() < (new Date(this.formInline.startTime)).getTime()
    }

    // 班级
    this.myAdd[0].data = await (getClassesByArea({ areaId: this.curArea.areaId }) || [])
    this.mySeach[1].data = this.myAdd[0].data
    this.tableHeader[0].data = this.myAdd[0].data
    // 查询学生
    this.myAdd[0].change = (e) => {
      this.setStudent(e)
    }
    this.myAdd[1].change = (e) => {
      this.formInline.name = this.myAdd[1].data?.filter(item => item.id === e)[0].name
    }
    this.myTableButtons[0].click = (data) => {
      this.isAdd = false
      this.$refs.addOrEdit?.resetFields()
      this.formInline = data.row
      console.log('编辑', data)
      // 查询学生
      this.setStudent(data.row.classesId)

      this.dialogVisible = true
    }
    this.myTableButtons[1].click = (data) => {
      console.log('删除', data)
      delChildrenLeaveRequest({ id: data.row.id }).then(res => {
        console.log('res', res)
        this.$message({
          type: 'success',
          message: `删除成功!`
        })
        this.$refs.myTable.onSubmit()
      })
    }
    this.myButtons[0].click = (data) => {
      console.log('新增请假登记', data)
      this.isAdd = true
      this.formInline = {}
      this.$refs.addOrEdit?.resetFields()
      this.dialogVisible = true
    }
    this.myButtons[1].click = (data) => {
      console.log('导出', data)
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const other = this.$refs.myTable.getMyTableSearch()
        other.pageNum = 0
        other.pageSize = 10000
        selChildrenLeaveRequestExport(other).then(res => {
          window.location.href = res
        })
      })
    }
  },
  methods: {
    setStudent (e) {
      this.myAdd[1].data = []
      getInfo({ classesId: e }).then(res => {
        console.log(res)
        this.myAdd[1].data = res.childrenList
        console.log('this.myAdd[1].data', this.myAdd[1].data)
      })
    },
    onSubmit () {
      this.$refs.addOrEdit.validate(async (valid) => {
        if (valid) {
          console.log('新增', this.formInline)
          this.formInline.state = 0
          this.formInline.createUserId = this.$store.getters.user.id
          this.formInline.createUserName = this.$store.getters.user.realName

          const myRes = this.isAdd ? await saveChildrenLeaveRequest(this.formInline) : await editChildrenLeaveRequest(this.formInline)
          console.log('res', myRes)
          this.$refs.myTable.onSubmit()
          this.isAdd = false
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: `${this.isAdd ? '新增' : '修改'}成功!`
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

::v-deep .el-drawer__header{
  color: rgba(0,0,0,0.9);
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  font-style: normal;
  text-transform: none;
  padding: 16px 20px 0 20px;
  margin: 0 0 16px 0;
}
::v-deep .el-drawer__body{
  height: 100%;
}
.myAddFrom{
  padding: 0 20px;
  height: calc(100% - 60px);
  overflow-y:auto;
  ::v-deep .el-date-editor{
    width: 100%;
  }
  ::v-deep .el-form-item__label{
    padding: 0; font-weight: bold;
  }
  //::v-deep .el-form-item__error{
  //  margin-left: 120px;
  //}
  .bottom{
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
}
</style>
